<template>
  <div class="ai-forecast-detail">
    <TopNavBar title="AI股票預測" type="back"  @rightClick="handleRightClick"   rightType="true" />
    <!-- <van-tabs ref="tabs" v-model:active="tabIndex" color="#222" line-width="30px" background="transparent" title-active-color="#222" title-inactive-color="#888" class="tab-bar">
      
      <van-tab v-for="(value,index) in tabList" :title="value.dictLabel" :key="value.dictCode" >
        
         <template #title>
            <div v-if="item.status==0" class="tab-title">{{ item.dictLabel }}</div>
          </template>
      </van-tab>
    </van-tabs> -->
    <van-tabs
        v-model:active="tabIndex"
        title-active-color="#000"
        color="#000"
        title-inactive-color="#999"
        @click-tab="handelShowTab"
        shrink
      >
        <van-tab v-for="(item, index) in tabList" :name="parseInt(item.dictValue)" :key="index">
          <template #title>
            <div v-if="item.status==0" class="tab-title">{{ item.dictLabel }}</div>
          </template>
        </van-tab>
      </van-tabs>
    <div class="stock-list">
      <div v-for="item in stockList" :key="item.name" class="stock-item" @click="goToStockDetail(item.coinUpperCase)">
        <img class="logo" :src="item.logo" />
        <div class="info">
          <div class="name">
            {{ item.coinUpperCase }}
            <span :class="item.up ? 'rise' : 'fall'">{{ getChangeUp(item) ? '漲' : '跌' }}</span>
          </div>
          <div class="desc" v-if="tabIndex == 4">休市中</div>
          <div class="desc" v-else>${{ priceFormat(tradeStore.allCoinPriceInfo[item.coin]?.close) }}</div>
        </div>
        <div class="profit-block">
          <span :class="['profit', getChangeUp(item) ? 'rise' : 'fall']">
            <template v-if="getChangeUp(item)">▲</template>
            <template v-else>▼</template>
            {{ tradeStore.allCoinPriceInfo[item.coin]?.priceChangePercent }}%
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Tabs as VanTabs, Tab as VanTab } from 'vant'
import TopNavBar from '@/components/common/TopNavBar.vue'
import { dict } from '@/api/common'
import { useTradeStore } from '@/store/trade'
import { priceFormat } from '@/utils/decimal.js'

const tradeStore = useTradeStore()
const tabList = ref([])
const route = useRoute()
const router = useRouter()
const tabIndex = ref(Number(route.query.tabIndex) || 0)
// const stockList = ref([
//   { name: 'TSM', up: false, profit: 1.45, logo: 'https://logo.clearbit.com/tsmc.com' },
//   { name: 'NVIDIA', up: false, profit: 2.33, logo: 'https://logo.clearbit.com/nvidia.com' },
//   { name: 'Apple Inc', up: false, profit: 0.71, logo: 'https://logo.clearbit.com/apple.com' },
//   { name: 'HMC', up: true, profit: 0.18, logo: 'https://logo.clearbit.com/honda.com' },
//   { name: 'TSLA', up: false, profit: 3.25, logo: 'https://logo.clearbit.com/tesla.com' },
//   { name: 'RACE', up: false, profit: 0.45, logo: 'https://logo.clearbit.com/ferrari.com' },
//   { name: 'ETR', up: true, profit: 0.09, logo: 'https://logo.clearbit.com/entergy.com' },
//   { name: 'CMI', up: true, profit: 0.05, logo: 'https://logo.clearbit.com/cummins.com' },
// ])

const stockList = computed(() =>
  tradeStore.secondContractCoinList.filter((it) => it.coinType === tabIndex.value)
)

function getChangeUp(item) {
  let chazhi = tradeStore.allCoinPriceInfo[item.coin]?.close - tradeStore.allCoinPriceInfo[item.coin]?.openPrice 
  // console.log(chazhi)
  return Number(chazhi) >= 0
}

const getDict = async () => {
  const res = await dict('t_second_coin_type')
  if (res.code == '200') {
    // tabList.value = [...res.data.map(e => e.dictLabel)]
    tabList.value = res.data
    tabIndex.value = res.data[0].dictCode
    console.log(tabList.value)
  }
}

const handelShowTab = (tab) => {
  console.log(tab)
  tabIndex.value = parseInt(tab.name)
  console.log(tabIndex.value)
}

const getList = async () => {
  const res = await dict('t_second_coin_type')
  if (res.code == '200') {
    // tabList.value = [...res.data.map(e => e.dictLabel)]
    tabList.value = res.data
    tabIndex.value = res.data[0].dictCode
    console.log(tabList.value)
  }
}
// getList()
// getDict()
onMounted(() => {
  getDict()
  // this.$nextTick(() => {
  //   this.$refs.tabs && this.$refs.tabs.resize && this.$refs.tabs.resize();
  // });
})

// watch(tabIndex, (val) => {
//   // tab.value = tabMap[val]
//   // getList(tabIndex.value)
// })

const goToStockDetail = (symbol) => {
  router.push(`/stock-detail/${symbol}`)
}
const handleRightClick = () => {
  router.push('/order-list')
}
</script>

<style scoped>
.ai-forecast-detail {
  background: #f6f8fa;
  min-height: 100vh;
}
.tab-bar {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 0 0 12px;
  border-bottom: 1.5px solid #eee;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.tab {
  padding: 16px 18px 12px 0;
  color: #888;
  cursor: pointer;
  position: relative;
}
.tab.active {
  color: #000;
}
.tab.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: #000;
  border-radius: 2px;
}
.stock-list {
  padding: 0 0 0 0;
}
.stock-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  margin: 12px 16px 0 16px;
  padding: 16px 12px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  cursor: pointer;
  transition: all 0.2s ease;
}

.stock-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.08);
}

.stock-item:active {
  transform: translateY(0);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
}
.logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 14px;
  background: #fff;
}
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.name {
  font-size: 17px;
  font-weight: 700;
  color: #222;
}
.name .rise {
  color: #0bb07b;
  margin-left: 4px;
  font-size: 15px;
}
.name .fall {
  color: #e14c4c;
  margin-left: 4px;
  font-size: 15px;
}
.desc {
  font-size: 13px;
  color: #888;
  margin-bottom: 2px;
}
.profit-block {
  min-width: 70px;
  text-align: right;
}
.profit {
  font-size: 16px;
  font-weight: 700;
}
.profit.rise {
  color: #0bb07b;
}
.profit.fall {
  color: #e14c4c;
}
</style> 